<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf8" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .music-item {
            display: flex;
        }

        .music-item img {
            width: 100px;
        }

        .music-info {
            text-align: right;
            flex: 1;
        }

        .music-info p {
            padding: 0 10px;
            margin: 5px 0;
        }

        .music-info p:first-child {
            text-align: left;
        }

        .music-info p:nth-child(2) {
            color: gray;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="music-list">
        <img src="https://p4.music.126.net/h594UHezlVtPV-n3nfF1gA==/19231557882058966.jpg?param=200y200" />
        <div class="music-info">
            <p>测试 - 测试</p>
            <p> —— QQ音乐</p>
            <p> sdfsdfsdf</p>
        </div>
    </div>
    <script>
        class HaCloudMusicSearch extends HTMLElement {

            constructor() {
                super()
                this.created()
            }
            // 创建界面
            created() {
                /* ***************** 基础代码 ***************** */
                const shadow = this.attachShadow({ mode: 'open' });
                // 创建面板
                const ha_card = document.createElement('div');
                ha_card.className = 'ha_cloud_music-search'
                ha_card.innerHTML = `
        <div class="search-input">
            <input type="search" placeholder="请输入要搜索的关键词" />
        </div>
        <div class="search-radio">
            <label><input type="radio" name="search-radio" value="playlist" checked />歌单</label>
            <label><input type="radio" name="search-radio" value="djradio" />电台</label>
            <label><input type="radio" name="search-radio" value="ximalaya" />专辑</label>
            <label><input type="radio" name="search-radio" value="music" />音乐</label>
        </div>
        <div class="search-list">
            
        </div>
    `
                shadow.appendChild(ha_card)
                // 创建样式
                const style = document.createElement('style')
                style.textContent = `
    .ha_cloud_music-search{}
    .search-input{padding:10px;}
    .search-input input{width:100%; padding:5px;}

    .search-radio {display:flex; text-align: center; padding-bottom: 10px;}
    .search-radio label{width:100%;}
    `
                shadow.appendChild(style);
                // 保存核心DOM对象
                this.shadow = shadow
                this.$ = this.shadow.querySelector.bind(this.shadow)
                // 创建成功
                this.isCreated = true

                /* ***************** 附加代码 ***************** */
                let { $ } = this
                let txtSearchInput = $('.search-input input')
                txtSearchInput.onkeypress = (event) => {
                    if (event.keyCode == 13) {
                        let value = txtSearchInput.value.trim()
                        if (value) {
                            txtSearchInput.value = ''
                            let type = $(".search-radio input:checked").value
                            // ha_cloud_music.toast(`正在搜索【${value}】`)
                            $('.search-list').innerHTML = ''
                            import('./ha_cloud_music-search-musiclist.js').then(() => {
                                const element = document.createElement('ha_cloud_music-search-musiclist')
                                $('.search-list').appendChild(element)
                                element.created(value)
                            })
                        }
                    }
                }
            }
        }
        customElements.define('ha_cloud_music-search', HaCloudMusicSearch);
    </script>
    <ha_cloud_music-search />
</body>

</html>